import {useState,useEffect} from 'react'
import getList from "./fetch";
import { Input, Space, Table } from 'antd';
export const useFilter =()=>{
const [nameList,setName] =useState("");
const [ageList,setAge] =useState('');
const handlerName=(e)=>{
    setName(e.target.value)
    console.log(nameList);
}
const handlerAge=(e)=>{
    setAge(e.target.value)
    console.log(ageList);
}

return {
    nameList,
    ageList,
    handlerName,
    handlerAge
}
}

export const useTable=()=>{
    const [useList, setList] = useState([])
    const getUser = () => {
        getList().then((results) => {
            // console.log(results.results);
            const data = results.results.map((item) => {
                const {
                    dob: { age },
                    id: { value },
                    name: { first, last },
                    location: { country, city },
                } = item;

                return {
                    age,
                    name: first + " " + last,
                    id: value,
                    address: country + " " + city,
                }
            })

            setList(data)


        });
    }
    useEffect(() => {
        getUser();
    }, []);
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '住址',
            key: 'action',
            render: (text, record) => (
              <Space size="middle">
              <button onClick={()=>addUser(text,record)}>添加</button>
              <button onClick={()=>reUser(text,record)}>删除</button> 

              </Space>
            ),
          },
    ];
    const addUser=(text)=>{
        console.log(text);
        fetch("......../addUser? +{text.id}")

    }
    const reUser=(text)=>{
        console.log(text);
        fetch("......../reUser?  +{text.id}")
    }
    return{
        useList,
        getUser,
        columns
    }
}